<template>
  <div>
    <h2>分类管理</h2>
    <!-- 按钮组: 添加 / 删除选中 -->
    <el-row class="btns">
      <el-button type="primary" size="mini" icon="el-icon-plus"
        >添加分类</el-button
      >
      <el-button type="danger" size="mini" icon="el-icon-delete">
        删除选中
      </el-button>

      <el-card class="article-table">
        <el-table border stripe :data="categoryData">
          <el-table-column label="id" prop="category_id"></el-table-column>
          <el-table-column label="分类" prop="category_alias"></el-table-column>
          <el-table-column label="操作">
            <el-button size="mini">
              编辑
              <i class="el-icon-edit"></i>
            </el-button>
            <el-button type="danger" size="mini">
              删除
              <i class="el-icon-delete"></i>
            </el-button>
          </el-table-column>
        </el-table>
      </el-card>
    </el-row>
    <!-- 对话框 -->
    <el-dialog title="添加用户" :visible.sync="dialogVisible">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Category',
  data() {
    return {
      categoryData: [
        { category_id: 1, category_alias: '旅行', article_total: 20 },
        { category_id: 2, category_alias: '美食', article_total: 16 },
        { category_id: 3, category_alias: '心情', article_total: 2 },
      ],
    }
  },
  created() {
    this.getCategories()
  },
  methods: {
    async getCategories() {
      const {
        result: { category_statistics },
      } = await this.$http.get('/API/V1/categories/statistics')
      this.categoryData = category_statistics
    },
  },
}
</script>
<style>
.btns {
  margin-top: 10px;
  padding: 10px;

  background-color: #ddd;
}
</style>
